<template>
  <div class="bgimg">
    <div class="main">
    <div style="position:absolute;">
      <back @click.native="doEsc()" />
    </div>
      <el-input  prefix-icon="el-icon-user" style="width:40%;position:relative;left:20%" placeholder="请输入好友名字" v-model="friendName"></el-input>
      <el-button type="primary" icon="el-icon-search" style="position:relative;left:20%" @click="doSearch()">搜索</el-button>
      <el-table
      :data="tableData"
      v-show="visible2"
      style="width:80%;margin:auto">
      <el-table-column
        prop="pic"
        label="头像"
        width="120">
        <template slot-scope="scope">
        <img :src="scope.row.pic" style="width:40px">
        </template>
      </el-table-column>
      <el-table-column
        prop="userName"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="tel"
        label="电话"
        width="150">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别">
        <template slot-scope="scope">
          <img v-if="scope.row.sex == true" src="../assets/1.png">
          <img v-else src="../assets/0.png" alt="">
        </template>
      </el-table-column>
      <el-table-column
        prop="id">
        <template slot-scope="scope">
        <el-popconfirm
          title="确认添加？"
          @confirm="doEnter(scope.row.id)"
        >
          <el-button  slot="reference" type="mini" >添加</el-button>
        </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div  v-show="visible" style="">
      <img src="../assets/search.png" style="width:20px;position:absolute;left:35%">
      <p  style="color: #909399;position:relative;left:40%">暂无匹配数据</p>
    </div>
      <!-- <el-button @click="doEnter()" style="position:relative;top:10%;left:30%" >确认</el-button> 
      <el-button @click="doEsc()" style="position:relative;top:10%;left:40%" >返回</el-button> -->
      </div>
  </div>
</template>

<script>
import back from '../components/back.vue'
export default {
  components: { back },
  data () {
    return {
      msg: '',
      friendName:'',
      fromUserId:'',
      toUserId:'',
      visible:true,
      visible2:false,
      list:[],
      tableData:[],
    }
  },
  mounted(){
      this.fromUserId = localStorage.getItem('fromUserId')
  },
  methods: {
    //通过姓名查找好友
    doSearch(){
      console.log()
      this.$axios.get('/api/website/user/search?userName='+this.friendName).then((resp) =>{
        // console.log(JSON.stringify(resp.list))
        this.tableData = resp.list
        if(this.tableData !=null){
          this.visible = false
          this.visible2 = true
        }
        // console.log(this.tableData)
      })
    },
      
      doEnter(id){

        let form ={
          friendId: id,
          id:this.fromUserId
      }
      console.log(form)
      if(id == this.fromUserId){
        this.$message.error('您不能添加自己为好友')
      }else{
          this.$axios.post('/api/socket/relationship/save',form).then((resp) =>{
            console.log(resp)
            if(resp.code == 200){
                this.$message.success(resp.msg)
            }
          })
      }
      },
      doEsc(){
          this.$router.push('/home')
      }
  }
}
</script>

<style scoped>
.main{
    height: 577px;
    width: 1070px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 15px;
    /* border:1px solid ; */
    background-color: white;
    
}
.bgimg {
		position: absolute;
		background: url(../assets/bg.png) no-repeat center;
		background-size: cover;
		height: 100%;
		width: 100%;
	}
</style>
